<template>
  <div class="app">
    <div class="login">
        <div style="text-align:center">
            <h1 style="color:aqua;position: relative;top:90px;font-size:40px">用户登录</h1>
        </div>
        <span class="zh">账号：</span><el-input v-model="user.username"  placeholder="请输入账号"  style="width:70%;margin-top:110px;border-radius:10px"></el-input><br>
        <span class="zh">密码：</span><el-input v-model="user.password" placeholder="请输入密码" show-password style="width:70%;margin-top:10px;border-radius:10px" @keydown.native.enter="login(user)"></el-input>
        <div style="display:flex;text-align:center">
            <span class="zh" style="margin-top:3%;margin-left:2.5%">验证码：</span><el-input v-model="user.code"  placeholder="请输入验证码"  style="width:30%;border-radius:10px;margin-top:4%"></el-input><br>
            <el-image :src="url" style="margin-top:3%;margin-left:1%" @click="UpdataVerification"></el-image>
        </div>
        <div>
            <el-button type="primary" style="margin-left:40px;margin-top:60px;width:140px;height:50px;font-size:20px" @click="Login" >登录</el-button>
            <el-button type="primary"  style="margin-left:140px;width:140px;height:50px;font-size:20px">忘记密码</el-button>
        </div>   
    </div>
  </div>
</template>

<script>
import request from '@/util/request'
export default {
    name:'ActiveLogin',
    data(){
        return{
            user:{username:'',password:'',uuid:'',code:''},
            url:'',
        }
    },
    mounted(){
        this.UpdataVerification();
    },
    methods:{
        //更新验证码
        UpdataVerification(){
            
            request.get('/admin/captcha').then((res) => {
                console.log(res);
                    this.url=res.data.base64Img;
                    this.user.uuid=res.data.uuid;
            })
            .catch(err =>{
                console.log('错误信息：',err.message)
                if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
               }
            )
        },
        //用户登录
        Login(){
            request.post('/user/login',this.user).then((res) => {
                console.log(res);
                
                localStorage.setItem("token",res.data.token);
                localStorage.setItem("userInfo",JSON.stringify(res.data.adminInfo));
                this.$router.push('/');
            })
            .catch(err =>{
                    console.log('错误信息：',err.message)
                    if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
               }
            )
        }
    },

}
</script>

<style lang="css" scoped>
.login{
    width: 500px;
    height: 550px;
    text-align: center;
    border-radius: 15px;
    background-image: url(./img/300.jpg);
    background-size: 100% 100%;
    background-color: rgb(255,208,0);
    position: relative;
    top: 25%;
    left: 50%;
    opacity: 10;

}
.app{
    height: 100vh;
    width:100%;
    background-image: url(./img/login.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    
}
.zh{
    font-size: 25px;
    color: white;
}
label.el-form-item__label {
    font-size: 50px;
}
</style>